<!--
 - Author : wang885298.
 - Date   : 2018/7/13.
 - File   : login.登录页
 -->

<template>
  <div class="login">
    <div class="login—text"></div>
    <div class="login-con">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>登&nbsp;&nbsp;录</span>
        </div>
        <el-form :model="ruleLogin" status-icon :rules="rules" ref="ruleLogin">
          <el-form-item prop="userName">
            <el-input type="text" round prefix-icon="el-icon-user" v-model="ruleLogin.userName" auto-complete="off"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input type="password" prefix-icon="el-icon-pwd" v-model="ruleLogin.pass" auto-complete="off"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-col :span="14">
              <el-input type="text" prefix-icon="el-icon-code" v-model="ruleLogin.code" auto-complete="off"
                        placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="10" style="text-align: right">
              <el-button type="primary" round>发送验证码</el-button>
            </el-col>
          </el-form-item>
          <el-form-item class="login-btn-box">
            <el-button type="primary" round @click="submitForm('ruleLogin')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>

    </div>
  </div>
</template>

<script>
  import request from '../request'
  export default {
    data() {
      let validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }
      let validateCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'))
        } else {
          callback()
        }
      }
      return {
        ruleLogin: {
          userName: '15806034686',
          pass: '12345678',
          code: 'asdf'
        },
        rules: {
          userName: [
            {validator: validateUserName, trigger: 'blur'}
          ],
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          code: [
            {validator: validateCode, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            request.loginPost(this.ruleLogin.userName, this.ruleLogin.pass, '01').then(res => {
              console.log(res)
              window.localStorage.setItem('accessTokenKey', res.accessTokenKey)
              window.localStorage.setItem('accessToken', res.accessToken)
              window.localStorage.setItem('userId', res.userId)
              this.$message({
                message: '恭喜你，登录成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.push('/map')
              }, 2000)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style lang="less">
  .login {
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/login_bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
  }

  .login—text {
    padding: 300px 100px 0;
    width: 835px;
    height: 335px;
    background: url('../assets/images/login_text.png') no-repeat center bottom;
  }

  .login-con {
    position: absolute;
    right: 160px;
    top: 50%;
    -webkit-transform: translateY(-60%);
    transform: translateY(-60%);
    width: 455px;
    height: 455px;
    background-image: url('../assets/images/login_box_bg.png');
    background-size: cover;
    background-position: center;
    .el-card {
      background-color: transparent;
      border: none;
    }
    .el-card__header {
      padding: 25px 20px;
      border: none;
      text-align: center;
      color: #ffffff;
      font-size: 24px;
    }
    .el-card__body {
      padding: 40px 60px;
    }
    .el-form-item {
      margin-bottom: 30px;
    }
    .el-input--prefix .el-input__inner {
      padding-left: 45px;
    }
    .el-input__prefix {
      left: 12px;
    }

    .login-btn-box {
      margin-top: 45px;
      button {
        display: block;
        padding: 16px 23px;
        width: 100%;
        font-size: 18px;
        border-radius: 26px;
      }
    }
    button {
      background: linear-gradient(top left, #0090d1, #00ffff);
    }

    button:hover,
    button:focus {
      background: linear-gradient(top left, #0174a8, #03d2d5);
    }

    input {
      border-radius: 20px;
      background-color: rgba(255, 255, 255, .05);
      border-color: transparent;
      color: #ffffff;
    }

    ::-webkit-input-placeholder { /* WebKit browsers */
      color: #5e6673;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #5e6673;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #5e6673;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #5e6673;
    }

    .el-input__inner:hover,
    .el-input__inner:focus {
      border-color: #03677c;
    }

    .el-icon-user {
      background: url('../assets/images/icon_user.png') no-repeat center right;
    }

    .el-icon-pwd {
      background: url('../assets/images/icon_pwd.png') no-repeat center right;
    }

    .el-icon-code {
      background: url('../assets/images/icon_code.png') no-repeat center right;
    }
  }
</style>
